<template>
	<div>
        <all-header :title="$route.meta.title" class="all-header"></all-header>
		<div class="main">
			<div class="card">
				<div class="safe">
					<div class="image">
						<img src="../assets/image/wallet/safe.png" mode="scaleToFill" />
					</div>
					<div class="text">资产保护中</div>
				</div>
				<div class="dis_show">
					<div class="title">资产折合</div>
					<div class="image" @click="balanceShow = !balanceShow">
						<img v-if="balanceShow" src="../assets/image/wallet/openeye.png" mode="scaleToFill"
							style="width:.3365rem;height: .2404rem;margin-top:.0962rem;" />
						<img v-show="!balanceShow" src="../assets/image/wallet/Eye.png" mode="scaleToFill"
							style="width:.3365rem;height: .2404rem;margin-top:.0962rem;" />
					</div>
				</div>
				<div class="number">
					<div v-show="balanceShow">{{ userInfo.balance }}</div>
					<div v-show="!balanceShow">******</div>
				</div>

				<div class="bottom">
					<div class="charge" @click="charge()">
						<img src="../assets/image/wallet/waller.png" mode="scaleToFill" />
						<div class="text">充值</div>
					</div>
					<div class="reflect charge" @click="toWithDrawal()">
						<img src="../assets/image/wallet/bankcard.png" mode="scaleToFill" />
						<div class="text">提现</div>
					</div>
				</div>
			</div>

			<div class="tabber">
				<div class="toDrawalList" :class="refreshFlag == 'recharge'? 'active': ''" @click="refreshFlag = 'recharge'">充值记录</div>
				<div class="chargelist" :class="refreshFlag == 'drawal'? 'active': ''" @click="refreshFlag = 'drawal'" >提现记录</div>
			</div>

			<div class="list" >
                <van-pull-refresh v-model="refresh_loading" @refresh="onRefresh">
                <van-empty description="暂无数据" v-if="list.length < 1 && !refresh_loading" />
				<div class="Ditem" >
					<div class="text">
						<div class="money"></div>
						<div class="date"></div>
					</div>
					<div class="right">
						<div class="tishi"></div>
						<img
							src=""
							mode="scaleToFill"
						/>
					</div>
				</div>
                </van-pull-refresh>
			</div>
		</div>
	</div>
</template>

<script setup>
import { computed, ref ,watch } from 'vue'
import commonStore from '../store/common'
import rechargeStore from '../store/recharge'
import withdrawalStore from '../store//drawal'

let balanceShow = ref(false)
let refresh_loading = ref(false)
let refreshFlag = ref('recharge')
const common = commonStore() 
const userInfo = computed(() => common.userInfo)
let list = ref([])

const onRefresh = () => { 
    refresh_loading.value = true
    list.value = []
    if (refreshFlag.value == 'recharge') { 
        getRechargeList()
    } else { 
        getWithdrawalList()
    }
}

const recharge = rechargeStore()
const getRechargeList = () => { 
    recharge.getrechargeList().then(res => { 
        list.value = res.data
        refresh_loading.value = false
    }).catch(() => { 
        refresh_loading.value = false
    })
}

const withdrawal = withdrawalStore()
const getWithdrawalList = () => { 
    withdrawal.getwithdrawalList().then(res => { 
        list.value = res.data
        refresh_loading.value = false
    }).catch(() => { 
        refresh_loading.value = false
    })
}

watch(refreshFlag,() => { 
    onRefresh()
})

const onload = () => { 
    onRefresh()
}

onload()

</script>

<style lang="scss" scope>
body {
	background-color: #f5f5f5;
}
.van-nav-bar__content { 
    background-color: #f5f5f5;
    .van-nav-bar__title { 
        font-weight: bold;
    }
}
.active { 
    font-weight: bold;
    font-size: .3077rem;
    color: black;
}
.main {
	padding: .2885rem;
    padding-top: 1.1538rem;

	.card {
		img {
			width: .2885rem;
			height: .2885rem;
		}

		border-radius: .2885rem;
		padding: .3846rem;
		padding-top: 0;
		background-color: white;
		height: 3.3654rem;
		position: relative;
		box-shadow: 0 .0385rem .0769rem 0 rgba(120, 118, 118, 0.2);

		.safe {
			img {
				margin-right: .0962rem;
				margin-top: .0481rem;
			}

			position: absolute;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #37495f;
			padding: .0962rem;
			font-size: .1923rem;
			width: 1.9231rem;
			border-top-right-radius: .2885rem;
			border-bottom-left-radius: .1923rem;
			right: 0;
		}

		.dis_show {
			margin-bottom: .3846rem;
			font-weight: bold;
			display: flex;
			align-content: center;
			position: absolute;
			top: .4808rem;

            .title { 
                font-size: .3173rem;
            }

			img {
				margin-left: .0962rem;
				margin-top: .0481rem;
			}
		}

		.number {
			position: absolute;
			top: .9615rem;
			font-weight: bold;
			div{ 
                font-size: .5769rem;
            }
		}

		.bottom {
			font-size: .2404rem;
			display: flex;
			width: 3.0769rem;
			justify-content: space-between;
			position: absolute;
			right: .2885rem;
			bottom: .2885rem;
		}

		.charge {
			background: black;
			border-radius: .0962rem;
			padding: .1442rem;
			width: 1.1538rem;
			color: white;
			display: flex;
			align-items: center;
			justify-content: center;

			img {
				margin-right: .0962rem;
			}
		}
	}

	.tabber {
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: bold;
		margin-top: .1923rem;
		color: #646566;

		.toDrawalList {
			padding: .1923rem;
		}

		.chargelist {
			padding: .1923rem;
		}

		.show {
			color: black;
			font-size: .3365rem;
		}
	}

	.list { 
		
		border-radius: .2885rem;

		.Ditem { 
			padding: .1923rem;
			font-weight: bold;
			border-bottom: .0096rem solid #e3e9e9;
			display: flex;
			justify-content: space-between;

			.text { 
				display: flex;
				flex-direction: column;
				
				.date { 
					font-size: .1923rem;
					font-weight: 300;
					padding-top: .0962rem;
					margin-left: .0962rem;
				}
			}

			.right { 
				display: flex;
				align-items: center;
				img { 
					width: .2404rem;
					height: .2404rem;
				}
				.tishi { 
					font-size: .1923rem;
					font-weight: 300;
					border-radius: .0481rem;
					padding: .0481rem;
					background-color: #52d390;
					color: white;
				}
			}
		}
	}
}
</style>
